<template>
    <div>

    </div>
    <h1>文本插值表达式 两个花括号</h1>
    <h3>我向你问好{{ msg }}</h3>
    <h5>包含html标签的数据是：{{ vtextvHtml }}</h5>
    <h5>去除html标签后的数据是：<p v-html="vtextvHtml"></p></h5>
<!-- 文本插值表达式是否只能读取数据，能不能进行运算 -->
    <div>1+2的结果是：{{ 1 + 2 }}</div>
    <div>a+b的结果是：{{ a+b }}</div>
    <!-- 文本插值表达式进行三元运算 -->
     <div>三元运算：{{ a > b ? 'a大于b' : 'a小于等于b' }}</div>

     <!-- v-bind指令 进行标签属性值的绑定 
      其可以简写为 :
      v-bind:href="url" 可以简写为 :href="url"
     比如a 标签的href属性 href v-bind:href=""
     -->
     <h2>v-bind属性绑定练习</h2>
     <a :href="url">点击进行跳转实验</a>

<a :href="url"><img src="//imgcps.jd.com/img-cubic/creative_server_cia_jdcloud/v2/2020218/100011343823/FocusFullshop/CkNqZnMvdDEvMjc5MjEyLzMyLzU3NTQvMTQ0OTI5LzY3ZDlmMWI1RjlkM2UxZTkzLzIxNDk3N2JlMzE3YzVmY2MucG5nEgU3MDMtdDACOPqme0ITCg_lurflpoLmtJflj5HmsLQQAUIQCgzlirLniIbllYblk4EQAkIQCgznq4vljbPmiqLotK0QBkIKCgbotoXlgLwQB1jP_4_J9AI/cr/s/q.jpg" alt="" width="80" height="80"></a>

</template>

<script setup>

const msg = 'hello vue3'
// 从后他读取的数据包含html标签，需要使用v-html指令渲染

const vtextvHtml = '<h1 style="color:red">hello vue3</h1>'

const a = 10

const b = 20

const url = 'http://www.baidu.com'

</script>

<style  scoped>

</style>